<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../plugins/element-ui/index.js"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/book.css"/>
    <style>
        #member-app .notAdmin::after {
            border: 0 !important;
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="user-app">
    <div class="container">
        <div class="tableBar">
            <el-input
                    v-model="searchName"
                    placeholder="请输入用户姓名"
                    style="width: 250px"
                    clearable
                    @keyup.native="searchUser"
            >
                <i
                        slot="prefix"
                        class="el-input__icon el-icon-search"
                        style="cursor: pointer"
                ></i>
            </el-input>
            <el-button
                    type="primary"
            >
                添加用户
            </el-button>
        </div>
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
        >
            <el-table-column
                    prop="username"
                    label="用户姓名"
            ></el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号"
            ></el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
            ></el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
            ></el-table-column>

            <el-table-column label="账号状态">
                <template slot-scope="scope">
                    {{ String(scope.row.state) === '0' ? '已禁用' : '正常' }}
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="resetPassword(scope.row)"
                    >
                        重置密码
                    </el-button>
                    <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="showUpdateUser(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="removeUser(scope.row)"
                    >
                        删除
                    </el-button>
                    <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="disableUser(scope.row,scope.row.state=='1'?0:1)"
                    >
                        {{ scope.row.state == '1' ? '禁用' : '启用' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 30]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                :current-page.sync="page.page"
                @size-change="changePageSize"
                @current-change="loadUserData"
        ></el-pagination>
    </div>
    <div>
        <el-dialog title="用户修改" :visible.sync="dialogFormUpdateVisible">
            <el-form :model="updateForm">
                <el-form-item label="用户姓名" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#user-app',
        data() {
            return {
                tableData: [],
                page: {
                    total: 0,
                    pageSize: 10,
                    page: 1
                },
                searchName: '',
                dialogFormUpdateVisible: false,
                updateForm: {
                    username: '',
                    phone: '',
                    email: '',
                    address: ''
                },
                formLabelWidth: '120px',
                middleRow: {}
            }
        },
        created() {
            this.loadUserData(1)
        },
        methods: {
            loadUserData(page) {
                let _this = this
                axios.get('/user/' + page + '/' + this.page.pageSize, {
                    headers: {
                        token: window.localStorage.getItem('token')
                    }
                }).then((response) => {
                    if (!response.data.success) {
                        location.href = '../login/login.html'
                    }
                    _this.tableData = response.data.data.list
                    _this.page.total = response.data.data.total
                })
            },
            changePageSize(pageSize) {
                this.page.pageSize = pageSize
            },
            searchUser() {
                let _this = this
                axios.get('/user/' + this.searchName + '/' + this.page.page + '/' + this.page.pageSize)
                    .then((response) => {
                        _this.tableData = response.data.data.list
                        _this.page.total = response.data.data.total
                        _this.page.page = response.data.data.pageNum
                    })
            },
            resetPassword(row) {
                this.$confirm(`您确定要重置【${row.username}】的密码吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 2. 发送请求重置密码
                    axios({
                        method: "put",
                        url: "/user/" + row.id
                    }).then(res => {
                        if (String(res.data.success === true)) {
                            // 2.1 重置密码成功提示
                            this.$message({
                                type: 'success',
                                message: '重置密码成功',
                                duration: 3000
                            });
                        } else {
                            // 2.2 重置密码失败提示
                            this.$message({
                                type: 'error',
                                message: '密码重置失败',
                                duration: 2000
                            });
                        }
                    })
                }).catch(() => {
                    // 3. 点击取消按钮提示
                    this.$message({
                        type: 'info',
                        message: '已取消重置',
                        duration: 1000
                    });
                });
            },
            removeUser(row) {
                this.$confirm(`您确定要删除【${row.username}】的用户吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this
                    axios({
                        method: "delete",
                        url: "/user/" + row.id
                    }).then(res => {
                        if (String(res.data.success === true)) {
                            this.$message({
                                type: 'success',
                                message: '用户删除成功',
                                duration: 3000
                            });
                            _this.loadUserData(1)
                        } else {
                            // 2.2 重置密码失败提示
                            this.$message({
                                type: 'error',
                                message: '用户删除失败',
                                duration: 2000
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        duration: 1000
                    });
                });
            },
            disableUser(row, sta) {
                let str = (sta === 0) ? '禁用' : '启用';
                this.$confirm(`您确定要` + str + `【${row.username}】的用户吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this
                    axios({
                        method: "put",
                        url: "/user/" + row.id + "/" + sta
                    }).then(res => {
                        if (String(res.data.success === true)) {
                            this.$message({
                                type: 'success',
                                message: '用户' + str + '成功',
                                duration: 3000
                            });
                            _this.loadUserData(1)
                        } else {
                            this.$message({
                                type: 'error',
                                message: '用户' + str + '失败',
                                duration: 2000
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消' + str,
                        duration: 1000
                    });
                });
            },
            showUpdateUser(row) {
                this.dialogFormUpdateVisible = true;
                this.updateForm.username = row.username
                this.updateForm.phone = row.phone
                this.updateForm.email = row.email
                this.updateForm.address = row.address
                this.middleRow = row;
            },
            updateUser() {
                this.$confirm(`您确定要修改【${this.middleRow.username}】的信息吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = new URLSearchParams();
                    data.append("username", this.updateForm.username)
                    data.append("phone", this.updateForm.phone)
                    data.append("email", this.updateForm.email)
                    data.append("address", this.updateForm.address)
                    data.append("id", this.middleRow.id)
                    axios({
                        method: "put",
                        url: "/user/",
                        data: data
                    }).then(res => {
                        if (String(res.data.success === true)) {
                            this.$message({
                                type: 'success',
                                message: '用户信息修改成功',
                                duration: 3000
                            });
                            this.dialogFormUpdateVisible = false
                            this.loadUserData(1)
                        } else {
                            this.$message({
                                type: 'error',
                                message: '用户信息修改失败',
                                duration: 2000
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改',
                        duration: 1000
                    });
                });
            }
        }
    })
</script>
</body>
</html>